<script setup>
import { ref, onMounted } from "vue";
import TabBar from "@/components/TabBar.vue";
import MyMessage from "@/components/MyMessage.vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import requestUtil, { getServerUrl } from "@/utils/request.js";
import Cookies from "js-cookie";
let router = useRouter();
let list = [
  // { src: "/img/个人中心/my_icon_collection.png", text: "商品收藏" },
  { src: "/img/个人中心/my_icon_follow.png", text: "店铺关注" },
  { src: "/img/个人中心/my_icon_addtocart.png", text: "我的购物车" },
  { src: "/img/个人中心/my_icon_balance.png", text: "我的余额" },
  { src: "/img/个人中心/my_icon_address.png", text: "收货地址" }
  // { src: "/img/个人中心/my_icon_help.png", text: "帮助中心" },
  // { src: "/img/个人中心/my_icon_service.png", text: "联系客服" }
];
let userInfo = ref({});

const fileList = ref([]);
const getUserInfo = async () => {
  let res = await requestUtil.post("/app/getUserInfo/", {
    userId: Cookies.get("userId")
  });
  userInfo.value = res.data.userInfo;
  const avatarUrl = getServerUrl() + "media/app_userAvatar/" + userInfo.value.head
      fileList.value = [{ url: avatarUrl }];
};
onMounted(async () => {
  await getUserInfo();
});
console.log(userInfo.value);
const afterRead = async file => {
  console.log(file);
  // 此时可以自行将文件上传至服务器
  let formData = new FormData();
  formData.append("avatar", file.file);
  formData.append("userId", Cookies.get("userId"));
  try {
    let res = await requestUtil.fileUpload("app/upload_avatar/", formData);
    if (res.data.code == 200) {
      let fileUrl =
        getServerUrl() + "media/app_userAvatar/" + res.data.file_url;
      fileList.value = [
        {
          url: fileUrl
        }
      ];
      console.log(fileList.value);

      ElMessage.success("头像上传成功");
      console.log(fileUrl);
    } else {
      ElMessage.error("头像上传失败");
    }
  } catch (err) {
    ElMessage.error("头像上传失败,请重试");
  }
};
</script>

<template>
  <div class="my">
    <div class="top">
      <div class="log">
        <img src="/img/个人中心/my_icon_setting.png" @click="router.push('/settings')" />
        <!-- <img src="/img/个人中心/tab_icon_massage.png" /> -->
      </div>
      <div class="headshot">
        <div class="img">
          <van-uploader
            :after-read="afterRead"
            accept="image/*"
            v-model="fileList"
            :max-count="1"
            reupload
            :deletable="false"
            preview-size="50px"
          />
        </div>
        <div class="username">{{userInfo.username}}</div>
      </div>
    </div>

    <div class="content1">
      <MyMessage :list="list"></MyMessage>
    </div>
  </div>
  <TabBar></TabBar>
</template>

<style scoped>
.top {
  position: relative;
  height: 300px;
  background: linear-gradient(180deg, #4a90e2, #50e3c2); /* 蓝绿渐变 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}

.top:hover {
  background: linear-gradient(180deg, #7f8ff4, #40c9a2); /* 深蓝绿动态渐变 */
}

.top .log img {
  width: 32px;
  margin-left: 700px;
  height: 32px;
  cursor: pointer;
  transition: transform 0.3s;
}

.top .log img:hover {
  transform: scale(1.1);
}

.top .headshot .img img {
  border-radius: 50%;
  width: 120px;
  border: 3px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.top .headshot .username {
  font-weight: 500;
  font-size: 32px;
  color: #ffffff;
}

.top .head {
  font-size: 24px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.top .head:hover {
  color: #ed2d77;
  text-shadow: 0 0 5px #ed2d77;
}

.uploading-indicator {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uploading-indicator span {
  color: #ff5722;
  font-size: 16px;
  margin-right: 10px;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 3px solid #ff5722;
  border-top: 3px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.content1 {
  margin-top: 30px;
  padding: 20px;
  background-color: #f0f4f8;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>